<template>
	<view>
		<uni-popup background-color="transparent" type="bottom" ref="mPopup" :is-mask-click="isMaskClick">
			<view class="m-popup-box" :style="{
				'padding-top': title || showCloseBtn ? '100rpx' : 0,
				'padding-bottom': showBtns ? 'calc(180rpx + env(safe-area-inset-bottom))' : `env(safe-area-inset-bottom)`,
				'background-color': bgColor
			}">
				<view class="titlte-box" :style="{background: bgColor}" v-if="title || showCloseBtn || showTextBtn">
					<view class="text-btn cancel" @click="_close" v-if="showTextBtn && !showCloseBtn">取消</view>
					<view class="title" v-if="title">{{ title }}</view>
					<text class="close-btn iconfont icon-a-Frame1074" :style="{color:closeIconColor}" @click="_close" v-if="showCloseBtn"></text>
					<view class="text-btn confirm" @click="_save" v-if="showTextBtn && !showCloseBtn">确认</view>
				</view>
				<!-- 内容content -->
				<view scroll-y class="content">
					<slot></slot>
				</view>
				<!-- 底部按钮 -->
				<view class="bottom-btns" v-if="showBtns"
					:style="{ boxShadow: shadowShow ? '4px 0px 10px 0px rgba(0, 0, 0, 0.04)' : '',background: bgColor }">
					<view class="btn" @click="clickBtn(item.text)" :class="{ _color: !!item._color }"
						:style="{ color: item.color, background: item.bgColor }" v-for="(item, index) in bottomBtns"
						:key="index">
						{{ item.text }}
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
/**
 *
 * showPopup: 是否显示
 * title:标题
 * showCloseBtn:关闭按钮
 * isMaskClick:遮罩层点击关闭
 * btns:[] 按钮列表  _color带颜色
 *
 *
 * */
export default {
	name: 'mBottomPopup',
	props: {
		showPopup: { default: false },
		title: { default: '' }, // 标题
		showCloseBtn: { default: true }, // 是否显示关闭按钮
		isMaskClick: { default: false }, // 点击遮罩层是否关闭弹窗
		showBtns: { dafault: false }, // 是否显示底部按钮
		showTextBtn: { default: false }, // 显示取消、确认按钮
		btns: {
			typeof: Array,
			default: () => []
		},
		clickBtnClose: {
			type: Boolean,
			default: true
		},
		shadowShow: {
			type: Boolean,
			default: true
		},
		bgColor:{
			dafault: '#ffffff'
		},
		closeIconColor:{
			dafault: '#f4f5f7'
		}
	},
	watch: {
		showPopup(curr) {
			if (curr) {
				this.$refs.mPopup.open('bottom');
			} else {
				this.$refs.mPopup.close();
			}
		}
	},
	computed: {
		bottomBtns() {
			let that = this;
			let btns = [
				{
					text: '查看考试报告'
				}
			];
			let arr = [];
			this.btns.forEach((item, index) => {
				let obj = Object.assign({}, btns[index], item);
				arr.push(obj);
			});
			return arr.length ? arr : btns;
		}
	},
	data() {
		return {};
	},
	methods: {
		clickBtn(text) {
			this.$emit('_btn', text);
			if(this.clickBtnClose){
				this._close();
			}
		},
		_close() {
			this.$emit('_close');
		},
		_save() {
			this.$emit('_save');
			this._close();
		}
	}
};
</script>

<style lang="scss" scoped>
.m-popup-box {
	width: 100vw;
	min-height: 20vh;
	max-height: 90vh;
	border-radius: 30rpx 30rpx 0 0;
	background-color: #ffffff;
	overflow-x: hidden;
	box-sizing: border-box;

	.titlte-box {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		border-radius: 30rpx 30rpx 0 0;
		width: 100vw;
		height: 100rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		padding: 60rpx 38rpx 40rpx;
		box-sizing: border-box;

		.title {
			width: 100%;
			color: #121317;
			font-weight: bold;
			font-size: 34rpx;
		}

		.close-btn {
			flex-shrink: 0;
			color: #f4f5f7;
			font-size: 34rpx;
		}

		.text-btn {
			flex-shrink: 0;
			font-size: 32rpx;
			color: #969799;

			&.confirm {
				color: #0052d9;
			}
		}
	}

	.bottom-btns {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1;
		background-color: #ffffff;
		width: 100vw;
		height: calc(180rpx + env(safe-area-inset-bottom));
		padding: 18rpx 40rpx calc(60rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
		display: grid;
		grid-auto-flow: column;
		grid-column-gap: 30rpx;
		align-items: center;

		// justify-content: space-around;
		.btn {
			border-radius: 24rpx;
			background-color: #f8f8f8;
			font-size: 33rpx;
			color: #121317;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;

			&._color {
				background: linear-gradient(90deg, #007aff 0%, #0052d9 100%);
				color: #ffffff;
			}
		}
	}
}
</style>
